<template>
	<div>
		<div class="font-size18 font-bold margin-bottom20 color252630">试题评论</div>
		<el-form inline :model="query" label-width="80">
			<el-form-item label="模糊搜索">
				<el-input placeholder="请输入用户昵称、手机号、评论内容" v-model="query.userName" class="width260 margin-right30"></el-input>
			</el-form-item>
			<el-form-item label="级别">
				<el-select v-model="query.randType" class="width260 margin-right30" clearable>
					<el-option label="一级评论" :value="1"></el-option>
					<el-option label="二级评论" :value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="query.status" class="width260 margin-right30" clearable>
					<el-option label="审核通过" :value="1"></el-option>
					<el-option label="审核驳回" :value="2"></el-option>
					<el-option label="待审核" :value="0"></el-option>
				</el-select>
			</el-form-item>
			<el-button type="primary" icon="el-icon-search" class="margin-left10" @click="handleSearch">搜索</el-button>
			<el-button type="default" icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
		</el-form>
		<div class="row-me">
			<el-button type="primary" @click="batchExamine">批量审核</el-button>
			<el-button type="primary" @click="batchDel">批量删除</el-button>
			<div class="flex1"></div>
			<el-button type="primary" @click="configVisible=true">评论审核配置</el-button>
		</div>
		<el-table :data="tableData" border class="margin-top20" header-cell-class-name="table-header-style"
			@selection-change="handleSelectionChange">
			<el-table-column type="expand" width="0">
				<template slot-scope="scope">
					<div style="max-width:50vw;">
						<div class="row-me">
							<span class="color929397 margin-right10">题目</span>
							<div class="flex1 color252525">
								<div>{{scope.row.target.title}}</div>
								<div>
									<div class="margin-top10" v-for="(item,index) in scope.row.target.optionList" :key="index">
										{{item.title}}.{{item.content}}
									</div>
								</div>
							</div>
						</div>
						<div class="row-me margin-top10">
							<span class="color929397 margin-right10">答案</span>
							<div class="color252525 flex1 line-height21"><span
									class="colorEE010B font-weight600 margin-right5">{{scope.row.target.answer}}</span>[解析]
								{{scope.row.target.textExplain}}
							</div>
						</div>
						<div class="row-me row-center margin-top10">
							<span class="color929397 margin-right10">来源</span>
							<div class="row-me flex-wrap flex1">
								<el-tag class="margin-right10" v-for="(item,index) in scope.row.target.examSource"
									:key="index">{{item}}</el-tag>
							</div>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column type="selection" width="55" align="center"></el-table-column>
			<el-table-column type="index" width="80" align="center" label="序号"></el-table-column>
			<el-table-column label="用户头像/昵称" align="center" width="160">
				<template slot-scope="scope">
					<div class="row-me row-center">
						<el-image class="width40 height40 margin-right10 radius6" :src="scope.row.userIcon"
							:preview-src-list="[scope.row.userIcon]"></el-image>
						<span>{{scope.row.userName}}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="content" label="评论内容">
				<template slot-scope="scope">
					<div v-html="scope.row.content"></div>
				</template>
			</el-table-column>
			<el-table-column prop="thumbUp" label="点赞数" width="70" align="center"></el-table-column>
			<el-table-column prop="createBy" label="用户手机号" align="center" width="120"></el-table-column>
			<el-table-column label="用户所有评论" width="150" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="clickUserComment(scope.row)">查看</el-button>
				</template>
			</el-table-column>
			<el-table-column label="查看试题评论" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="clickQuextionComment(scope.row)">{{scope.row.target.beMadeCount}}</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="评论时间" align="center" width="160"></el-table-column>
			<el-table-column label="一级/二级评论" align="center" width="120">
				<template slot-scope="{row}">
					<span>{{row.commentId?'二级评论':'一级评论'}}</span>
				</template>
			</el-table-column>
			<el-table-column label="状态" align="center" width="100">
				<template slot-scope="{row}">
					<span v-if="row.status==0">待审核</span>
					<span v-else-if="row.status==1">审核通过</span>
					<span v-else-if="row.status==2">审核失败</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="220" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="handleStatus(scope.row)" v-if="scope.row.status==0">审核</el-button>
					<el-button type="text" @click="handleReply(scope.row,1)" v-if="!scope.row.commentId">回复</el-button>
					<el-button type="text" @click="handleConfirm(scope.row)"
						v-if="!scope.row.commentId">{{scope.row.recommend?'取消推荐':'推荐'}}</el-button>
					<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
					<el-popconfirm title="确认删除？" @confirm="handleDel(scope.row)">
						<el-button slot="reference" type="text">删除</el-button>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<div class="margin-top10">
			<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="query.pageNumber"
				:page-sizes="[30, 40, 50, 60]" @size-change="handleSizeChange" :page-size="query.pageSize" :total="pageTotal"
				@current-change="handlePageChange"></el-pagination>
		</div>

		<!-- 评论审核配置 -->
		<el-dialog title="评论审核配置" :visible.sync="configVisible" width="40%">
			<el-radio-group v-model="commentConfig.isCommentOpen">
				<el-radio :label="0">关闭评论</el-radio>
				<el-radio :label="1">系统审核</el-radio>
				<el-radio :label="2">api审核</el-radio>
				<el-radio :label="3">人工审核</el-radio>
				<el-radio :label="4">禁止评论</el-radio>
			</el-radio-group>
			<span slot="footer" class="dialog-footer">
				<el-button @click="configVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleConfigSave">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 回复弹框 -->
		<el-dialog title="回复内容" :visible.sync="replyVisible" width="30%">
			<el-input type="textarea" :rows="4" placeholder="请输入回复内容" v-model="commentParams.content">
			</el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="replyVisible = false">取 消</el-button>
				<el-button type="primary" @click="commentSave">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" :visible.sync="editVisible" width="30%">
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="内容">
					<el-input v-model="form.content" type="textarea" rows="8"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleEditSave">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 用户所有评论 -->
		<el-dialog title="用户所有评论" :visible.sync="commentVisible" width="60%">
			<div class="row-me row-center margin-bottom20">
				<el-input v-model="commentQuery.userName" placeholder="请输入用户昵称、ID、评论内容" class="width300 mr20"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearchComment">搜索</el-button>
				<el-button icon="el-icon-refresh-right" @click="handleRefreshComment">重置</el-button>
				<el-button type="primary" icon="el-icon-delete" @click="delAllSelection">批量删除</el-button>
			</div>
			<el-table :data="commentTableData" border ref="multipleTable" header-cell-class-name="table-header-style"
				@selection-change="handleSelectionCommentChange">
				<el-table-column type="expand">
					<template slot-scope="props">
						<div class="padding-left20 padding-right20">
							<b>
								<p v-html='props.row.target.title'></p>
							</b>
							<br />
							<div v-if="props.row.target.type.value == 0 || props.row.target.type.value == 1">
								<el-table :data="props.row.target.optionList" style="width: 100%">
									<el-table-column label="选项" width="50">
										<template slot-scope="scope">
											<b>{{scope.row.title||''}}</b>
										</template>
									</el-table-column>
									<el-table-column label="内容">
										<template slot-scope="scope">
											<p v-html='scope.row.content'></p>
										</template>
									</el-table-column>
								</el-table>
							</div>
							<br>
							<b>
								<p>答案：<span v-html='props.row.target.answer'></span><span class="margin-left10">【解析】</span><span
										v-html="props.row.target.textExplain"></span></p>
							</b>
							<b>
								来源：<template v-if="props.row.target.questionSource">
									<el-tag class="margin-right10" type="success" v-for="(item,index) in props.row.target.questionSource"
										:key="index">
										{{item.name}}
									</el-tag>
								</template>
							</b>
						</div>
					</template>
				</el-table-column>
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column label="用户ID" width="80" prop="userId" align="center"></el-table-column>
				<el-table-column label="用户头像/昵称" align="center" width="200">
					<template slot-scope="scope">
						<div class="row-me center-all">
							<el-image class="width40 height40" :src="scope.row.userIcon"
								:preview-src-list="[scope.row.userIcon]"></el-image>
							<span class="margin-left10">{{scope.row.userName}}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="content" label="评论内容">
					<template slot-scope="scope">
						<div v-html="scope.row.content"></div>
					</template>
				</el-table-column>
				<el-table-column prop="thumbUp" label="点赞数" width="70" align="center"></el-table-column>
				<el-table-column label="状态" align="center" width="70">
					<template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
				</el-table-column>
				<el-table-column prop="createTime" label="评论时间" width="160"></el-table-column>
				<el-table-column prop="recommend" width="100" label="是否回复" align="center">
					<template slot-scope="scope">
						<span class="blue-text" v-if="scope.row.replay" @click="clickReply(scope.row)">已回复</span>
						<span v-else>未回复</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="200px" align="center">
					<template slot-scope="scope">
						<el-button v-if="scope.row.status =='0'" type="text" class="red"
							@click="handleStatus(scope.$index, scope.row)">审核</el-button>
						<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button type="text" @click="handleDel(scope.row)">删除</el-button>
						<el-dropdown>
							<span class="el-dropdown-link">
								更多<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item @click.native="handleReply(scope.row)">
									<el-button type="text">回复</el-button>
								</el-dropdown-item>
								<el-dropdown-item v-if="(!scope.row.recommend)&&scope.row.status=='1'"
									@click.native="handleConfirm(scope.row)">
									<el-button type="text">{{scope.row.recommend?'取消推荐':'推荐'}}</el-button>
								</el-dropdown-item>
								<el-dropdown-item @click.native="handleTopicInfo(scope.row)">
									<el-button type="text">查看题目信息
									</el-button>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[10, 20, 30, 40]"
					@size-change="handleCommentSizeChange" :current-page="commentQuery.pageNumber" :total="commentPageTotal"
					@current-change="handleCommentPageChange"></el-pagination>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="commentVisible = false" type="primary">关 闭</el-button>
			</span>
		</el-dialog>

		<!--查看试题评论-->
		<el-dialog title="试题评论" :visible.sync="questionCommentVisible" :modal-append-to-body="false" width="50%">
			<el-table :data="tableCommentData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column label="用户头像" align="center">
					<template slot-scope="scope">
						<el-image class="width50" :src="scope.row.userIcon" :preview-src-list="[scope.row.userIcon]"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="createBy" label="用户昵称"></el-table-column>
				<el-table-column prop="content" label="评论内容">
					<template slot-scope="scope">
						<div v-html="scope.row.content"></div>
					</template>
				</el-table-column>
				<el-table-column prop="thumbUp" label="点赞数"></el-table-column>
				<el-table-column label="评论状态" align="center">
					<template slot-scope="scope">
						<el-tag :type="scope.row.status == '1' ? 'success' : 'danger'">
							{{ scope.row.status == '1' ? '已通过' : '未通过' }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="评论时间"></el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total,sizes, prev, pager, next" :current-page="examQuery.pageNumber"
					:page-sizes="[30, 40, 50, 60]" @size-change="handleSizeExamChange" :page-size="examQuery.pageSize"
					:total="examPageTotal" @current-change="handlePageExamChange">
				</el-pagination>
			</div>
			<span slot="footer">
				<el-button type="primary" @click="questionCommentVisible=false">关 闭</el-button>
			</span>
		</el-dialog>

		<!-- 题目信息 -->
		<el-dialog title="题目信息" :visible.sync="topicInfoVisible" width="40%">
			<el-form ref="form" :model="topicInfoForm" label-width="80px">
				<el-form-item label="题干内容:">
					<div v-html="topicInfoForm.title"></div>
				</el-form-item>
				<el-form-item label="选项内容:">
					<div v-for="(item,index) in topicInfoForm.optionList" :key="index">
						<span>{{item.title}}.{{item.content}}</span>
					</div>
				</el-form-item>
				<el-form-item label="参考答案:">
					<div>{{topicInfoForm.answer}}</div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="topicInfoVisible = false" type="primary">关 闭</el-button>
			</span>
		</el-dialog>

		<!-- 回复评论 -->
		<el-dialog title="已回复评论" :visible.sync="repliedVisible" width="40%">
			<div class="row-me margin-bottom20">
				<el-button :type="replyIndex==1?'primary':'default'" @click="getCommentReply(1)">管理员回复</el-button>
				<el-button :type="replyIndex==2?'primary':'default'" @click="getCommentReply(2)">用户回复</el-button>
			</div>
			<el-form ref="form" :model="replyForm" label-width="80px">
				<el-form-item label="评论内容:">
					<div>{{replyForm.content}}</div>
				</el-form-item>
				<el-form-item label="评论时间:">
					<div>{{replyForm.createTime}}</div>
				</el-form-item>
			</el-form>
			<el-table :data="commentReplyData" border>
				<el-table-column label="管理员回复" prop="content" align="center"></el-table-column>
				<el-table-column label="回复时间" prop="createTime" align="center"></el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button @click="repliedVisible = false" type="primary">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				pageTotal: 0,
				tableData: [],
				multipleSelection: [],
				configVisible: false,
				commentConfig: {
					isCommentOpen: null
				},
				replyVisible: false,
				commentParams: {},
				form: {},
				editVisible: false,
				commentVisible: false,
				commentQuery: {
					pageNumber: 1,
					pageSize: 10
				},
				commentTableData: [],
				commentPageTotal: 0,
				commentMultipleSelection: [],
				topicInfoForm: {},
				topicInfoVisible: false,
				repliedVisible: false,
				replyForm: {},
				commentReplyData: [],
				replyIndex: 1,
				questionCommentVisible: false,
				tableCommentData: [],
				examQuery: {
					pageNumber: 1,
					pageSize: 30
				},
				examPageTotal: 0
			}
		},
		filters: {
			formatStatus(cellValue) {
				if (cellValue == '0') {
					return '待审核'
				} else if (cellValue == '1') {
					return '已通过'
				} else if (cellValue == '2') {
					return '不合格'
				}
			}
		},
		mounted() {
			this.getData()
			this.getMiniApp()
		},
		methods: {
			clickQuextionComment(item) {
				this.examQuery.questionId = item.questionId
				this.getQuestionComment()
				this.questionCommentVisible = true
			},
			async getQuestionComment() {
				const res = await this.$get('/admin/user/pageQuestionComment', this.examQuery)
				if (res.code == 1000) {
					this.tableCommentData = res.data.list
					this.examPageTotal = res.data.totalRow
				}
			},
			handleSizeExamChange(val) {
				this.$set(this.examQuery, 'pageSize', val);
				this.getQuestionComment()
			},
			handlePageExamChange(val) {
				this.$set(this.examQuery, 'pageNumber', val);
				this.getQuestionComment()
			},
			//已回复
			clickReply(row) {
				this.replyForm = row
				this.getCommentReply()
				this.repliedVisible = true
			},
			//获取用户回复数据
			async getCommentReply(type = 1) {
				this.replyIndex = type
				const res = await this.$postForm('/admin/user/getCommentReply', {
					commentId: this.replyForm.id,
					type
				})
				this.commentReplyData = res.data
			},
			// 查看用户所有评论
			clickUserComment(row) {
				this.commentQuery.userId = row.userId
				this.getCommentData()
				this.commentVisible = true
			},
			//用户所有评论分页
			handleCommentSizeChange(val) {
				this.commentQuery.pageSize = val
				this.getCommentData()
			},
			handleCommentPageChange(val) {
				this.commentQuery.pageNumber = val
				this.getCommentData()
			},
			//查看题目信息
			handleTopicInfo(row) {
				this.topicInfoForm = row.target
				this.topicInfoVisible = true
			},
			//多选操作
			handleSelectionCommentChange(val) {
				this.commentMultipleSelection = val;
			},
			//用户所有评论批量删除
			async delAllSelection() {
				this.$confirm('确定要删除吗？', '提示', {
					type: 'warning'
				}).then(() => {
					if (this.commentMultipleSelection.length == 0) return
					let ids = Array.from(this.commentMultipleSelection, ({
						id
					}) => id)
					this.$get('/admin/user/deleteComments', {
						ids,
						type: 0
					}).then(res => {
						if (res.code == 1000) {
							this.$message.success('批量删除成功')
							this.getCommentData()
							this.commentMultipleSelection = []
						}
					})
				}).catch(() => {})
			},
			//获取用户所有评论列表数据
			async getCommentData() {
				const res = await this.$get('/admin/user/pageComment', this.commentQuery)
				if (res.code == 1000) {
					this.commentTableData = res.data.list
					this.commentPageTotal = res.data.totalRow
				}
			},
			async getMiniApp() {
				const res = await this.$postForm('/admin/minis/getMiniApp')
				if (res.code == 1000) {
					this.commentConfig.id = res.data.id
					this.commentConfig.isCommentOpen = res.data.isCommentOpen
				}
			},
			//批量审核
			async batchExamine() {
				if (this.multipleSelection.length == 0) {
					this.$message.warning('请选择批量审核的数据！')
					return
				}
				let arr = []
				for (let item of this.multipleSelection) {
					arr.push({
						id: item.id,
						status: 1
					})
				}
				const res = await this.$post('/admin/user/commentUpdateStatus', arr)
				if (res.code == 1000) {
					this.$message.success('批量审核成功')
					this.getData()
				}
			},
			//批量删除
			async batchDel() {
				if (this.multipleSelection.length == 0) {
					this.$message.warning('请选择批量删除的数据！')
					return
				}
				let ids = Array.from(this.multipleSelection, ({
					id
				}) => id)
				this.$confirm('确定要删除吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.$get('/admin/user/deleteComments', {
						ids: ids.join(','),
						type: 0
					}).then(res => {
						if (res.code == 1000) {
							this.$message.success('批量删除成功')
							this.getData()
						}
					})
				}).catch(() => {});
			},
			//删除
			async handleDel(row) {
				const res = await this.$get('/admin/user/deleteComments', {
					ids: row.id,
					type: row.type
				})
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getData()
					if (this.commentQuery.userId) {
						this.getCommentData()
					}
				}
			},
			//确认编辑
			async handleEditSave() {
				if (this.$.isEmpty(this.form.content)) {
					this.$message.warning('评论内容不能为空!')
					return
				}
				this.form.target = {}
				const res = await this.$post('/admin/user/editComment', this.form)
				if (res.code == 1000) {
					this.$message.success('编辑成功')
					this.getData()
					if (this.commentQuery.userId) {
						this.getCommentData()
					}
					this.editVisible = false
				}
			},
			//编辑
			handleEdit(row) {
				this.form = JSON.parse(JSON.stringify(row))
				this.editVisible = true
			},
			// 推荐操作
			handleConfirm(row) {
				let text = ''
				if (row.recommend) {
					text = '确定要取消推荐吗？'
				} else {
					text = '确定要推荐吗？'
				}
				this.$confirm(text, '提示', {
					type: 'warning'
				}).then(() => {
					this.$get('/admin/user/recommendComment', {
						recommend: row.recommend ? false : true,
						id: row.id
					}).then(res => {
						if (res.code == 1000) {
							this.$message.success('操作成功')
							this.getData()
							if (this.commentQuery.userId) {
								this.getCommentData()
							}
						}
					})
				}).catch(() => {});
			},
			//审核
			handleStatus(row) {
				this.$confirm('确定要审核通过吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.$postForm(`/admin/user/updateStatus?&id=${row.id}&status=1`).then(res => {
						if (res.code == 1000) {
							this.$message.success('审核成功')
							this.getData()
						}
					})
				}).catch(() => {});
			},
			//回复
			handleReply(row) {
				this.replyVisible = true
				this.commentParams.commentId = row.id
			},
			//确定回复
			async commentSave() {
				if (this.$.isEmpty(this.commentParams.content)) {
					this.$message.warning('请输入回复内容!')
					return
				}
				const res = await this.$post(
					`/admin/user/comment?commentId=${this.commentParams.commentId}&content=${this.commentParams.content}`)
				if (res.code == 1000) {
					this.$message.success('回复成功')
					this.commentParams = {}
					this.getData()
					if (this.commentQuery.userId) {
						this.getCommentData()
					}
					this.replyVisible = false
				}
			},
			async handleConfigSave() {
				const res = await this.$post('/admin/minis/add', {
					id: this.commentConfig.id,
					isCommentOpen: this.commentConfig.isCommentOpen,
				})
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getMiniApp()
					this.configVisible = false
				}
			},
			//多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			async getData() {
				const res = await this.$get('/admin/user/pageComment', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			//分页
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData();
			},
			handleSizeChange(val) {
				this.query.pageSize = val
				this.getData();
			},
			handleSearch() {
				this.query.pageNumber = 1
				this.getData();
			},
			handleRefresh() {
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				this.getData();
			},
			//用户所有评论查询重置
			handleSearchComment() {
				this.commentQuery.pageNumber = 1
				this.getCommentData();
			},
			handleRefreshComment() {
				this.commentQuery.userName = ''
				this.handleSearchComment();
			}
		}
	}
</script>

<style>
</style>